layui.use([ 'layer', 'table','form','jquery'], function(){
    let layer = layui.layer,
        table = layui.table, //表格
        form = layui.form,
        $ = layui.jquery;

    let tableInstance = table.render({
        elem: '#userList',
        url:'/user/list',
        page: true,
        limits:[10,15,30],
        cols: [[
            {type:'radio'},
            {field:'id', width:80, title: 'ID'},
            {field:'logName', title: '登录名'},
            {field:'relName', title: '真实名'},
            {field:'tel', width:120, title: '联系方式'},
            {field:'sex', title: '性别'},
            {field:'addr', width:180, title: '地址'},
            {field:'deptName', title: '部门名称'},
            {field:'jobName',title: '岗位'},
            {field:'roleName', title: '角色'},
            {field:'status', title: '状态',templet:function(user){
                    return `<input type="checkbox" data-id="${user.id}" lay-filter="status" lay-skin="switch" lay-text="启用|禁用" ${user.status===0?'checked':''}>`;
            }}
        ]]
    });

    //启用禁用开关
    form.on("switch(status)",function(data){
        let userId = $(data.elem).data("id");
        let status = data.elem.checked?0:1;
        $.get("/user/status",{id:userId,status:status},function(res){
            layer.msg(res.msg, {time: 2000, icon:6});
        });
    });

    //搜索
    form.on('submit(search)',function(data){
        tableInstance.reload({
            where : data.field
        });
    });

    //编辑和添加的通用弹出层
    function add_edit(edit){
        layer.open({
            type: 2,
            title:'用户编辑',
            anim: 5,
            content: '/user/edit/page',
            area:['600px','400px'],
            skin:'layui-layer-molv',
            success:function(layero, index){
                if(edit){
                    let body = layer.getChildFrame('body',index);
                    body.find('.id').val(edit.id);
                    body.find('.relName').val(edit.relName).attr("disabled","disabled").addClass("layui-disabled");
                    body.find('.sex input[title="'+edit.sex+'"]').prop("checked","checked");
                    body.find('.job select').val(edit.jobId);
                    body.find('.role select').val(edit.roleId);
                    body.find('.dept select').val(edit.deptId);
                }
            },
            end:function(){  //无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
                tableInstance.reload();
            }
        });
    }

    //添加用户
    $(".add_btn").click(function(){
        add_edit();
    });

    //更新执行
    form.on("submit(execute)",function(data){
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
        $.post("/user/edit",data.field,function(res){
            parent.layer.msg(res.msg, {time: 2000, icon:6});
        });
        return false;  //Provisional headers are shown
    });

    //监控单选按钮，获取对应的数据存储。
    let tr_obj;
    table.on('radio(user)', function(obj){
        tr_obj = obj.data;
    });

    //编辑操作
    $(".edit_btn").click(function(){
        if(tr_obj === undefined){
            layer.msg('请选择要操作的行!',{icon:6,time:2000,anim:6});
            return;
        }
        add_edit(tr_obj);
    });

    //删除操作
    $(".del_btn").click(function () {
        console.log(tr_obj);
        if(tr_obj === undefined){
            layer.msg('请选择要操作的行!',{icon:6,time:2000,anim:6});
            return;
        }
        layer.confirm("你确定要删除【"+tr_obj.relName+"】吗？",{skin:"layui-layer-molv",anim:4,icon:3},function () {
            $.post("/user/del/"+tr_obj.id,function(res){
                layer.msg(res.msg, {time: 2000, icon:6});
                tableInstance.reload();
            });
        });
    });


});